<template>
  <view class="list-container">
    <div v-if="num">
      <!-- 头部搜索结果提示 -->
      <view class="top-result">
        <uni-notice-bar single :text="`共${num}条搜索结果${content ? (':关于(' + filter + ')' + content) : ''}`"></uni-notice-bar>
      </view>
      <!-- 主题搜索结果列表 -->
      <view class="book-list">
        <bookList :books="books"></bookList>
      </view>
    </div>
    <!-- 列表为空展示的内容 -->
    <view class="empty" v-else>
      <img src="./static/empty.png">
      <p>书库暂无相关书籍</p>
    </view>
  </view>
</template>

<script>
import bookList from './components/book-list.vue';
import { getRecommendBookListAsync } from '@/api/book.js'
export default {
  data () {
    return {
      filter: '',
      content: '',
      author: '',
      name: '',
      IBSN: '',
      books: [],//推荐书单
      num: ''
    };
  },
  components: {
    bookList
  },

  onLoad (option) {
    this.filter = option.filter;
    this.content = option.content;

    if (this.filter === "作者") {
      this.author = this.content
    } else if (this.filter === "书名") {
      this.name = this.content
    } else {
      this.IBSN = this.content
    }

    this.getRecommendBookList()

  },
  methods: {
    // 获取书单列表
    async getRecommendBookList () {
      try {
        const params = {
          author: this.author,
          name: this.name,
          IBSN: this.IBSN
        }
        const res = await getRecommendBookListAsync(params)
        this.books = res.data.data.map(item => {
          item.status = Number(item.status)
          return item
        })

        console.log('%c [  ]-70', 'font-size:13px; background:pink; color:#bf2c9f;', this.books)
        this.num = this.books.length
      } catch (error) {

        console.log('%c [  ]-56', 'font-size:13px; background:pink; color:#bf2c9f;', error)
      }
    }
  }
};
</script>

<style lang="scss">
.list-container {
  background-color: #fff;
  height: 100vh;

  .top-result {
    .uni-noticebar {
      margin-bottom: 0;
    }
  }

  .book-list {
    padding: 0 40rpx;

    bookList:first-of-type {
      padding-top: 0;
    }
  }

  .empty {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80%;

    img {
      width: 150rpx;
      height: 150rpx;
    }

    p {
      font-size: 40rpx;
      font-style: italic;
      font-weight: 700;
      color: #eee;
    }
  }
}
</style>
